<template>
	<view style="background-color: #f8f7f7; margin-bottom: 0rpx; padding-bottom: 0rpx;">
		<view class="title">中铁四局电气化公司料场管理系统</view>
		<image class="image1" src="../../static/logo.png" mode="aspectFit"></image>
		<!-- <view style="background-color: #ffffff; padding: 30rpx 50rpx; margin: 0rpx 120rpx; border-radius: 8px;">
			<input placeholder="账号" />
		</view> -->
		<view class="input_area">
		  <view class="input_log">  
			<image class="user_Icon" src="../../static/logIcon.png"></image>  
			<input @blur="name" id="username" name="username" maxlength='40' type="text" placeholder="账号" />
		  </view>
		  <view class="input_log">
			<image class="user_Icon" src="../../static/pwdIcon.png"></image>  
			<input @blur="password" id="password" name="password" maxlength='20' type="password" placeholder="密码" />
		  </view>
		</view>
		<view class="btn_area">
			<button @click="login"> 登录 </button>
			<view @click="forget" style="font-weight: bold; text-align: center; color:#787878 ; padding-top: 10rpx;">忘记密码?</view>
		</view>
		<image style="padding-top: 480rpx;" class="image2" src="../../static/u6.png" mode="aspectFit"></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inputUsernameDate:"AUST",
				inputPasswordDate:"123456",
				loginBtnTxt:"登录",
				btnLoading:false,
				disabled:false,
				inputUserName: '',
				inputPassword: '',
				avatarUrl:"../../static/timg.png",
				logIcon:"../../static/logIcon.png",
				pwdIcon:"../../static/pwdIcon.png",
				key:"1"
			}
		},
		methods: {
			name(e){
				console.log(e.detail.value)
				this.inputUserName = e.detail.value
			},
			password(e){
				this.inputPassword = e.detail.value
			},
			login(){
				console.log("点击了登录")
				  uni.request({
					  
					  url: "http://121.251.65.102:8088/jeecg-boot/sys/mLogin", //仅为示例，并非真实接口地址。
					   method: 'POST',
						   data: {
							   "username": this.inputUserName, 
								
							   "password": this.inputPassword 
						   },
					   success: (res) => {
							console.log(res.data.message)
							
							if(res.data.message == "操作成功！")
							{
								uni.showToast({
							    title: '登录成功',
							    duration: 2000
							});
								uni.switchTab({
									url : "/pages/admin/admin"
								})
							}
							else{
								
								uni.showToast({
								icon:"none",
								title: '账号或密码错误',
								duration: 2000,
							});
							}
						   } ,
						   fail: (res) => {
						   	console.log("lose:",res)
						   }
					   }); 
				// console.log("点击了登录")

				
				
				
			},
			forget(){
				console.log("点击了忘记密码")
			}
		},
	}
</script>

<style>
	page{
	  background: #f8f7f7;
	}
	.image1{
		padding: 40rpx 91.5rpx 50rpx 91.5rpx;
		width: 567rpx;
		height: 79.8rpx;
	}
	.image2{
		padding: 140rpx 75rpx 0rpx 75rpx;
		width: 600rpx;
		height: 150rpx;
	}
	.title {
		text-shadow: 0.1em 0.1em 0.2em #90b6b7;
		/* font-style:oblique; */
		font-weight: bold;
		text-align: center;
		padding: 100rpx 0rpx 0rpx 0rpx;
		font-size: 44rpx;
	}
	/* 头像view */
	.userinfo {
	  padding-top: 100rpx;
	  padding-bottom: 100rpx;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	}
	
	/* 头像图片 */
	.user_headIcon {
	  width: 150rpx;
	  height: 150rpx;
	  padding: 20rpx;
	  border-radius: 50%;
	}
	
	/* 登陆图片 */
	.user_Icon{
	  width: 60rpx;
	  height: 60rpx;
	  padding: 20rpx;
	  border-radius: 50%;
	}
	
	/* 账号密码view */
	.input_log{
	  display: flex;
	  border-bottom: 1px solid #ddd;
	  flex-direction: row;
	}
	
	.input_area {
	  background-color: #fff;
	  text-align: left;
	  border-top: 1px solid #ddd;
	}
	
	.input_area input {
	  height: 100rpx;
	  line-height: 100rpx;
	}
	
	/* 按钮 */
	.btn_area {
	  width: 80%;
	  margin: 0 auto;
	  padding: 40rpx 0rpx 0rpx 0rpx;
	}
	
	.btn_area button {
	  margin-top: 40rpx;
	  color: #fff;
	  background-color: #90b6b8
	}
	
	.txt_area {
	  margin-top: 30rpx;
	  display: flex;
	  justify-content: space-between;
	  font-size: 30rpx;
	}
	
	.forgot-password {
	  color: rgb(85, 192, 165);
	}
	
	.txt_area {
	  color: #f90;
	}

	
</style>